<template>
  <div class="introduce flex-column">
    <div class="title">{{info.title}}</div>
    <div class="information flex-row">
      <!-- <van-rate
        :value="info.score"
        :size="11"
        allow-half
        color="#ee0a24"
        void-color="#A9A7B8"
        void-icon="star"
      />
      <div class="score">{{info.score}} / 5.0</div> -->
      <show-rate 
        :value="info.score"
        />
      <div class="dot"></div>
      <div class="distance">{{info.distance}}</div>
    </div> 
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
@title-size: 34rpx;
@info-size: 22rpx;
@primery-color: #000000;
@second-color: #A9A7B8;
.introduce {
  height: 160rpx;
  background-color: rgba(255, 255, 255, 1);
  align-items: flex-start;
  .title {
    font-size: @title-size;
    color: @primery-color;
    margin: 0 0 12rpx 0;
  }
  .information {
    font-size: @info-size;
    color: @second-color;
    .score {
      margin: 0 18rpx 0 16rpx;
    }
    .dot {
      width: 10rpx;
      height: 10rpx;
      background-color: @second-color;
      margin: 0 20rpx 0 18rpx;
      border-radius: 50%;
    }
  }
}
</style>